<template>
  <AppPage>
    <n-card rounded-10 flex-1>
      <n-space style="display: flex; justify-content: flex-start" border-separate mb-10>
        <n-button type="primary" @click="handleAdd">
          <TheIcon icon="material-symbols:add" :size="18" class="mr-5" /> 新增分类
        </n-button>
      </n-space>

      <CrudTable
        ref="$table"
        v-model:query-items="queryItems"
        :extra-params="extraParams"
        :scroll-x="1200"
        :columns="columns"
        :get-data="getCategoryList"
        @on-checked="onChecked"
      >
        <template #queryBar>
          <QueryBarItem label="分类查询">
            <n-input
              v-model:value="queryItems.categoryName"
              type="text"
              placeholder="请输入类别名称"
              @keydown.enter="$table?.handleSearch"
            />
          </QueryBarItem>
        </template>
      </CrudTable>

      <!-- 新增/编辑/查看 -->
      <CrudModal
        v-model:visible="modalVisible"
        :title="modalTitle"
        :loading="modalLoading"
        :show-footer="modalAction !== 'view'"
        @on-save="handleSave"
      >
        <n-form
          ref="modalFormRef"
          label-placement="left"
          label-align="left"
          :label-width="80"
          :model="modalForm"
          :disabled="modalAction === 'view'"
        >
          <n-form-item
            label="分类名称"
            path="categoryName"
            :rule="{
              required: true,
              message: '请输入分类名称',
              trigger: ['input', 'blur'],
            }"
          >
            <n-input v-model:value="modalForm.categoryName" placeholder="请输入分类名称" />
          </n-form-item>
        </n-form>
      </CrudModal>
    </n-card>
  </AppPage>
</template>

<script setup>
import { NButton } from 'naive-ui'
import { renderIcon, isNullOrUndef } from '@/utils'
import { useCRUD } from '@/composables'
import { addCategory, deleteCategory, updateCategory, getCategoryList } from '@/api/blog/category.js'

defineOptions({ name: 'Category' })

const $table = ref(null)
/** QueryBar筛选参数（可选） */
const queryItems = ref({})
/** 补充参数（可选） */
const extraParams = ref({})

onActivated(() => {
  console.log('onActivated')
  $table.value?.handleSearch()
})

const columns = [
  {
    title: '序号',
    key: 'key',
    width: 80,
    align: 'center',
    render: (_, index) => {
      return `${index + 1}`
    },
  },
  { title: '分类', align: 'center', key: 'categoryName', width: 120 },
  {
    title: '操作',
    key: 'actions',
    width: 240,
    align: 'center',
    fixed: 'right',
    render(row) {
      return [
        h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            style: 'margin-left: 15px;',
            onClick: () => handleEdit(row),
          },
          { default: () => '编辑', icon: renderIcon('material-symbols:edit-outline', { size: 14 }) }
        ),

        h(
          NButton,
          {
            size: 'small',
            type: 'error',
            style: 'margin-left: 15px;',
            onClick: () => handleDelete(row.id),
          },
          { default: () => '删除', icon: renderIcon('material-symbols:delete-outline', { size: 14 }) }
        ),
      ]
    },
  },
]

// 选中事件
function onChecked(rowKeys) {
  if (rowKeys.length) $message.info(`选中${rowKeys.join(' ')}`)
}

const {
  modalVisible,
  modalAction,
  modalTitle,
  modalLoading,
  handleAdd,
  handleDelete,
  handleEdit,
  handleView,
  handleSave,
  modalForm,
  modalFormRef,
} = useCRUD({
  name: '分类管理',
  doCreate: addCategory,
  doDelete: deleteCategory,
  doUpdate: updateCategory,
  refresh: () => $table.value?.handleSearch(),
})
</script>
